Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a memory map of VRAM #544

Merged
merged 11 commits into from
Feb 20, 2024
Merged

Add a memory map of VRAM #544

merged 11 commits into from
Feb 20, 2024

Conversation

ISSOtm
Copy link
Member

@ISSOtm ISSOtm commented Feb 18, 2024

Fixes #533.

The hand-written SVGs return! (Sorry, Antonio... :P)

The SVG was originally (see 966b0d1) generated automatically from a Python script. At that point, it was fully self-contained (no JS required for interactivity)... at the cost of being just shy of one megabyte.

Considering this was ridiculously large, and visibly taxing on the browser, the SVG was entirely overhauled to move the interactivity from a ****ton of elements and a bit of CSS, to only a bunch of elements and a bit of JS. (This was never fully realised, thus never committed.)

The result was still very large, so I started making use of the <use> element, which allows duplicating elements without copy-paste—perfect for these massive grids! (And chances are, the browser may be able to optimise that. Idk.) This was impossible with the old CSS-only design, due to it being based on some elements having the same position within the parent (which <use> inherently precludes.)

Unfortunately, <use> is also very finicky with regards to mouseover/mouseenter events (especially the former), so the final implementation (fdbf322) may raise some eyebrows among JS devs. I tried to be clean, but I'm only an amateur in that field... :D

This makes it more prominent, and also more useful
It is slightly dynamic, relying on a fuckton of pre-generated elements
and a `display:` CSS rule. This generates a **monster** SVG (5108 lines),
which is not great.

The file could be slimmed down tremendously by making use of `<use>` elements
(e.g. `<use href="#tile_block">` in six places), but this is incompatible
with the CSS trick used (then the `<text>` elements cannot be all positioned
in the same place in the parent).
It may be more reasonable to use some JS for this, instead of this pure-CSS hack.
The SVG went from 929744 to 9249 bytes!!
Meanwhile, we only have 29 sloc of JS in ~3 KiB, which perform very
little processing.
Definitely a worthwhile tradeoff.

The SVG being significantly deflated also makes it easy to process by hand,
removing the need for a generator script and simplifying the build.
@ISSOtm ISSOtm requested a review from avivace February 18, 2024 13:11
src/js/vram_map.js Outdated Show resolved Hide resolved
src/js/vram_map.js Outdated Show resolved Hide resolved
src/js/vram_map.js Outdated Show resolved Hide resolved
@ISSOtm
Copy link
Member Author

ISSOtm commented Feb 18, 2024

This last commit moves the JS file from stand-alone to being contained within the SVG itself; this makes the SVG fully interactive even when viewed stand-alone instead of within Pan Docs.

src/imgs/src/vram_map.svg Outdated Show resolved Hide resolved
src/imgs/src/vram_map.svg Outdated Show resolved Hide resolved
src/imgs/src/vram_map.svg Outdated Show resolved Hide resolved
src/imgs/src/vram_map.svg Outdated Show resolved Hide resolved
src/imgs/src/vram_map.svg Show resolved Hide resolved
src/imgs/src/vram_map.svg Show resolved Hide resolved
src/imgs/src/vram_map.svg Outdated Show resolved Hide resolved
src/imgs/src/vram_map.svg Outdated Show resolved Hide resolved
Co-authored-by: Sylvie <[email protected]>
Copy link
Member

@avivace avivace left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job, here's some first comments

src/Memory_Map.md Show resolved Hide resolved
src/Memory_Map.md Outdated Show resolved Hide resolved
@ISSOtm ISSOtm requested a review from avivace February 18, 2024 16:23
@ISSOtm ISSOtm dismissed avivace’s stale review February 18, 2024 16:24

Integrated rewording

Copy link
Member

@avivace avivace left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks amazing to me. Just a note: it doesn't seem to work exactly as expected as a "standalone SVG" when loading the image directly in the browser.

@avivace avivace merged commit be8d5bc into gbdev:master Feb 20, 2024
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Vram map - suggestion
3 participants